<template>
    <el-row class="plan">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item :title="col.title" :name="'tab'+colIndex" v-for="(col,colIndex) in collapseList" :key="colIndex">
                <div class="info">
                    <span style="width:420px;margin-left:470px">上课时间</span>
                    <span>授课老师</span>
                    <span>授课地点</span>
                </div>
                <div v-for="(item,index) in col.childList" :key="index" class="formInfo">
                    <span class="smallTitle">{{item.label}}</span>
                    <!-- <span>{{item.startTime}}</span> -->
                    <el-date-picker
                      v-model="item.startTime"
                      @change="getdata"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      >
                    </el-date-picker>
                    <el-time-picker 
                      @change="changeHandler"
                      is-range 
                      v-model="item.time" 
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间" 
                      placeholder="选择时间范围" 
                      style="width:250px" 
                      format="HH:mm" 
                      value-format="HH:mm">
                    </el-time-picker>
                    <el-select v-model="item.teacherId" placeholder="请选择" @change="handChange" style="width:200px" >
                        <el-option 
                          v-for="(opt,optIndex) in teacherList" 
                          :key="optIndex" 
                          :label="opt.name" 
                          :value="opt.organizationUserId">
                        </el-option>
                    </el-select>
                    <el-select v-model="item.classId" placeholder="请选择" @change="handChange" style="width:200px">
                        <el-option v-for="(opt) in classList" :key="opt.classId" :label="opt.name||' '" :value="opt.id">
                        </el-option>
                    </el-select>
                </div>  
            </el-collapse-item>
        </el-collapse>
        <el-row style="margin-top:50px">
            <el-button @click="back">上一步</el-button>
            <el-button style='background:#6474d3;color:#fff' @click="save">保存</el-button>
        </el-row>
    </el-row>
</template>

<script>
import RowCourse from "./RowCourse";
 import store from '@/store'
export default {  
  data() {
    return {
      activeName: "tab0",
      collapseList: [],
      teachClassId: "",
      lessionPlanData: [],
      value1:"",
      time:[]
    };
  },
  components: {
    RowCourse
  },
  props: ["teacherList", "classList", "status"],
  watch: {
    $route() {
      if (this.$route.path == "/home/RowCourse") {
        this.teachClassId = this.$route.query.id;
        this.getClassLession();
      }
    },
  },
  methods: {
    // 获取班级排课信息
    handChange() {
      var data = this.collapseList;
      this.collapseList = []
      this.collapseList = data
    },
    getdata(value){
      console.log(value)
    },
    changeHandler(value){
      console.log(typeof value)
      console.log(this.collapseList,value)
    },
    getClassLession() {
      this.collapseList = [];
      this.$axios({
        url: "/api/course/xzs/lessionPlan.detail.info.get",
        method: "post",
        data: {
          teachClassId: Number(this.teachClassId)
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret +=encodeURIComponent(it) + "=" +encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }
        ]
      }).then(res => {
        if (res.data.value == "成功") {
          const d = res.data.data.unitList;
          if (d && d.length > 0) {
            d.forEach((item, index) => {
              const title = item.stageName + "-" + item.unitName + ":";
              this.collapseList.push({
                title:item.stageName + "-" +item.unitName +":" +item.stageName + "-" + item.unitName,
                unitId: item.unitId
              });
              if (item.relUnitLessionList && item.relUnitLessionList.length > 0 ) {
                this.collapseList[index].childList = [];
                    item.relUnitLessionList.forEach((col, colIndex) => {
                  const startdate = this.timestampToTime(col.beginTime);
                  const enddate = this.timestampToTime(col.endTime);
                  const time = [];
                  time.push(startdate.split(" ")[1], enddate.split(" ")[1]);
                  this.collapseList[index].childList.push({
                    label: colIndex + 1 + "、" + col.lessionName,
                    teacherId: col.organizationUserId,
                    classId: Number(col.classroomId),
                    time: time,
                    startTime: startdate.split(" ")[0],
                  lessionPlanId: col.lessionPlanId    
                  });
                  this.time = this.collapseList[index].childList
                });
              }
            });
          }
        }
      });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = String(date.getMinutes()).padStart(2, "0");
      return Y + M + D + h + m;
    },
    // 保存
    save() {
      console.log(this.status);
      let temp = [];
      let lessionPlanList = [];
      this.collapseList.forEach((col, colIndex) => {
        temp = temp.concat(col.childList);
      });
      if (temp && temp.length > 0) {
        temp.forEach(item => {
          lessionPlanList.push({
            lessionPlanId: item.lessionPlanId,
            beginTime: item.startTime+" " + item.time[0] + ":00",
            organizationUserId: item.teacherId,
            classroomId: item.classId,
          });
        });
        console.log(lessionPlanList);
      }
      this.$axios({
        url: "/api/course/xzs/lessionPlan.info.update", 
        method: "post",
        data: {
          lessionPlanList,
          teachClassId:Number(this.teachClassId)
        }
      }).then(res => {
        if(res.data.errorCode=="0"){
          this.$message({
            showClose: true,
            message: "保存成功",
            type: "success"
          });
          this.$router.push({ path: "/RowcourseAdmin"});
          this.getData();
        }
      });
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/user/xzs/teachClass.list.get"; 
      this.$axios({
        url:this.url,
        method:"post",
        data:{  
          organizationId:organizationId,
          pageNum: that.fengye,
          pageSize: "10",
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }     
        ]
      }).then(res =>{
        this.tableData=res.data.data
      }).catch(err =>{
        console.log(err);
      })
    },
    // 返回上一步
    back() {
      this.$emit("editCourse", "1");
    }
  },
  mounted() {
    console.log()
    this.teachClassId = this.$route.query.id;
    this.getClassLession();
    this.getData();
    for(let i = 0 ;i < this.classList.length;i++){
      this.classList[i].classId = this.classList[i].id
      console.log(this.classList[i].classId)  
    }
  },
};
</script>
<style>
.plan .title {
  font-size: 14px;
  margin-bottom: 30px;
}
.plan .el-collapse-item__header {
  background: #f2f2f2;
  padding: 0 20px;
  border: none;
}
.plan .info {
  display: flex;
  justify-content: flex-start;
  height: 40px;
  line-height: 40px;
}
.plan .info span {
  width: 200px;
  text-align: left;
  margin-left: 50px;
}
.plan .formInfo {
  display: flex;
  margin-top:10px;
  justify-content: flex-start;
}
.plan .smallTitle {
  width: 400px;
  height: 32px;
  line-height: 32px;
}
.plan .el-select {
  margin-left: 50px;
}
.plan .el-date-editor { 
  margin-left: 20px;
}
</style>